<template>
  <Layout>
    <Form ref="form1" :model="form1" :label-width="120">
      <Row class="query-form">
        <Col span="8">
          <FormItem label="二级集团：">
            <Select v-model="form1.twoOrgId" style="width:100%" :transfer="true" >
              <Option v-for="item in twoOrgList" :value="item.orgId" :key="item.orgId">{{ item.orgName }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
            <FormItem label="单位名称：" prop="order">
              <company-select v-model="form1.companyName" style="width:100%" />
                        <!-- <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgname='setQueryOrgName'
                                      :orgTree="true"
                                      :setCurrentName="{label:form1.companyName,value:form1.companyId}"></cascader-dom> -->
            </FormItem>
        </Col>
        <Col span="8">
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button class="ivu-btn-query" icon="md-search" @click="query()">查询</Button>
        </Col>
      </Row>
    </Form>

    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据！" :loading="buttonLoading" size="small"
          @on-sort-change="sortChange"
           border :columns="columns1" :data="dataTable">
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
              @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
              show-total show-sizer show-elevator/>
      </Col>
    </Row>

    <Modal :title="getModalTitle('安全事故简报')" :transfer=false :mask-closable="false"
           v-model="dialogShow" v-if="dataToView" :width=1000 class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false" :model="dataToView && dialogShow" :rules="mode === 'view'?{} :ruleCustom"
                :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?110:null">
            <Row type="flex" justify="space-around" class="code-row-bg" v-if="mode === 'view'">
              <Col span='23'>
                <FormItem label="事故名称：">
                  <div>{{ dataToView.sartName }}</div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span='7'>
                <FormItem label="事故类别：" prop="accTypeId">
                  <div v-if="mode === 'view'">{{ dataToView.accTypeName }}</div>
                </FormItem>
              </Col>
              <Col span='7'>
                <FormItem label="事故时间：" prop="sartDate">
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.sartDate) }}</div>
                </FormItem>
              </Col>
              <Col span='7'>
                <FormItem label="企业负责人：" prop="chargeId">
                  <div v-if="mode === 'view'">{{ dataToView.charge }}</div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="7">
                <FormItem label='直接经济损失(万元)：' prop='loseMoney'>
                  <div v-if="mode === 'view'">{{ dataToView.loseMoney }}</div>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='歇工天数：' prop="daysWork">
                  <div v-if="mode === 'view'">{{ dataToView.daysWork }}</div>
                </FormItem>
              </Col>
              <Col span='7'>
                <FormItem label="二级集团安全环保管理人员：" prop="secondaryGroupPersionId">
                  <div v-if="mode === 'view'">{{ dataToView.secondaryGroupPersion }}</div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="7">
                <FormItem label='填报人：' prop="userName">
                  <div v-if="mode === 'view'">{{ dataToView.userName }}</div>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='填报人手机号：' prop="phone">
                  <div v-if="mode === 'view'">{{ dataToView.phone }}</div>
                </FormItem>
              </Col>
              <Col span='7' v-if="dataToView.injuryLevelId =='1000001019000000003'">
                <FormItem label="集团安全环保管理人员：" prop="groupPersionId">
                  <div v-if="mode === 'view'">{{ dataToView.groupPersion }}</div>
                </FormItem>
              </Col>
              <Col span='7' v-else></Col>
            </Row>

            <Row>
              <Col span="23" class="query-form" style="margin-left: 15px">
                <Table highlight-row stripe border style="margin-top:10px;margin-bottom: 10px" :max-height="350" :columns="itemColumn"
                       :data="dataToView.briefItems">
                </Table>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span='23'>
                <FormItem label="初步原因分析：" prop="accAnalyze">
                  <div v-if="mode === 'view'">{{ dataToView.accAnalyze }}</div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span='23'>
                <FormItem label="主要经过：" prop="accDesc">
                  <div v-if="mode === 'view'">{{ dataToView.accDesc }}</div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span='23'>
                <FormItem label='备注：' prop="notes">
                  <div v-if="mode === 'view'">{{ dataToView.notes }}</div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem v-if="mode === 'view'" label="伤亡事故简报表：">
                  <div v-show="dataToView.briefIdFiles.length>0"
                       v-for="(item,index) in dataToView.briefIdFiles">
                    <a @click="downloadFiles(item,index)">
                      <span style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                  </div>
                </FormItem>
              </Col>
            </Row>

            <Row v-if="mode != 'view'"  type="flex" justify="space-around" class="code-row-bg">
              <Col span='23'>
                <p>注：</p>
                <p>1.事故类别：生产安全事故按照GB6441规定填写，其他填“交通事故、治安案件、职业病”； </p>
                <p>2.就业类型：按照“正式工、合同工、劳务工、相关方人员”填写；</p>
                <p>3.伤害程度：轻伤（损失工作日＜105日）、重伤（损失工作日≥105日）、死亡，损失工作日按照GB6441附录B计算</p>
                <p>4.事故发生7天内上传此表。</p>
              </Col>
            </Row>
          </Form>

        </Col>
      </Row>
      <div slot="footer">
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>

  </Layout>
</template>

<script>
import {Api} from '../../../../api/index.js'
import {sessionStorage} from '../../../../common/cacheUtils.js';
import cascaderDom from '../../../../components/cascader-dom.vue';
import pageCommonFunction from '@/components/pageCommonFunction.js'

export default {
  components: {
    cascaderDom
  },
  data() {
    return {
        ...this.createCommonDataField(),
      buttonLoading1: false,
      groupLeaderList: [],
      history: [],
      loading2: false,
      model3: false,
      missionList: [],
      fileUrl: Api.interestedPartiesUserFile,
      currentUser:sessionStorage('userId').getObject('userId'),
      missionSelectModal: false,
      upLoadList1: [],
      appStatusList: [],
      locationList: [],
      stdRankList: [],
      downloadUrl: Api.downloadMongoFile,
      upUrl: Api.uploadMongoFile,
      form1: {},
      uploadList: [],
      pageSizeArray: [10, 20, 50],
      pagedata: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      dataTable: [],
      columns1: [
        {
          title: "序号",
          width: 80,
          align: "center",
          fixed: 'left',
          render: (h, params) => {
            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
          }
        },
          {title: '事故名称', align: 'center', key: 'sartName', minWidth: 140, render: (h, params) => {
              return h('div', [
                  h('A', {
                      props: {type: 'primary', size: 'small'},
                      style: {fontSize: '13px',},
                      on: {
                          click: () => {
                             this.viewDetail(params.row.workId)
                          }
                      }
                  }, params.row.sartName)
              ])
          }},
        // {title: '伤亡人员姓名', minWidth: 150, align: 'center', key: 'victim',},
        {title: '所属二级集团', minWidth: 200, align: 'center', key: 'twoOrgName',},
        {title: '所属单位', minWidth: 200, align: 'center', key: 'companyName',},
        {title: '事故简报通过时间', minWidth: 150, align: 'center', key: 'createDate',sortable: "custom", 
          render: (h, params) => {
            return h('span', params.row.createDate? this.formatDate(new Date(params.row.createDate), 'yyyy-MM-dd'):'--');}},
        {title: '说明', minWidth: 200, align: 'center', key: 'content',},
      ],

        itemColumn: [
            {title: '序号', width: 70, align: 'center', render: this.indexColumnsRender},
            {title: '伤亡人员姓名', align: 'center', key: 'victim', minWidth: 100,},
            {
                title: '性别', align: 'center', key: 'gender', minWidth: 80, render: (h, params) => {
                    return h('span', params.row.gender == '0' ? '男' : '女')
                }
            },
            {title: '年龄', align: 'center', key: 'age', minWidth: 80,},
            {title: '工种或岗位', align: 'center', key: 'position', minWidth: 120,},
            {title: '伤害部位', align: 'center', key: 'injured', minWidth: 120,},
            {title: '就业类型', align: 'center', key: 'membershipName', minWidth: 120,},
            {title: '伤害程度', align: 'center', key: 'injuryLevelName', minWidth: 120,},
            {title: '歇工天数', align: 'center', key: 'daysWork', minWidth: 100,},
            {title: '直接经济损失(万元)', align: 'center', key: 'loseMoney', minWidth: 120,},
        ],
      model1: false,
      location: null,
      form1datacopy: {},
      twoOrgList:[],
      buttonLoading: false,
      tableHeight: 10,
    }
  },
  mounted() {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
    this.query();
    let _this  = this;
    this.$http.get(Api.getTwoOrgInfo).then((res) => {
      res.data.data.forEach(item => {
        _this.twoOrgList.push(item);
      })
    });
  },
  methods: {
      ...pageCommonFunction,
      sortChange(data) {
        if (data.order === 'asc' || data.order === 'desc') {
            let order = data.key
            this.form1.dynamicSort = order + ' ' + data.order
            this.query()
        }
    },
      setQueryOrgName(data) {
          this.$set(this.form1, "companyName", data);
      },
      viewDetail(id) {
          this.$http.get(Api.getBriefing + id).then((res) => {
              this.mode = 'view'
              this.dataToView = res.data.data;
              let url = Api.interestedPartiesUserFile + '/' + id + '/files/guideFile';
              this.$http.get(url).then((res1) => {
                  this.dataToView.briefIdFiles = res1.data.data
              })
              this.dialogShow = true
          }).catch(e => {
              this.$Message.error("数据获取失败")
          })
      },
    pageChange(pageNum) {
      this.pagedata.currentPage = pageNum;
      this.query();
    },
    pageSizeChange(pageSize) {
      this.pagedata.pageSize = pageSize;
      this.query();
    },
    reset() {
      this.form1 = {};
      if (this.$refs.queryOrgCascader) {
          this.$refs.queryOrgCascader.resetCurrentOrg();
      }
      this.query();
    },
    query() {
      this.buttonLoading = true
      let orgId = sessionStorage('userId').getObject('userId').companyId;
      let data = {
        startPage: this.pagedata.currentPage,
        size: this.pagedata.pageSize,
        createOrgId:orgId,
        noticType:"report",
      };
      data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
      let url = Api.remindList;

      this.$http.get(url, {params: data}).then((res) => {

        this.dataTable = res.data.data.data;
        this.pagedata.total = res.data.data.totalSize;
        this.buttonLoading = false
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length);
    },
  },
  watch: {

  },
}
</script>

<style lang='css' scoped>
@import '../../../../index.css';
</style>
